<template>
  <div class="classify">
    <div class="bigbox">
      <!-- 头部 -->
      <header>
        <div class="h-left">
          <div @click="back">
            <img to="/switch" src="../assets/image/18695.png" />
          </div>
        </div>
        <div class="h-title">熊猫看书</div>
        <div class="h-right">
          <router-link to="/personal">书架</router-link>

          <router-link to="/search" class="h-search"></router-link>
        </div>
      </header>
      <!-- 导航栏 -->
      <nav>
        <ul>
          <li>
            <router-link to="/home">首页</router-link>
          </li>
          <li>
            <router-link to="/leader">排行</router-link>
          </li>
          <li class="active">
            <router-link to="/classify">分类</router-link>
          </li>
          <li>
            <router-link to="/schoolboy">男生</router-link>
          </li>
          <li>
            <router-link to="/schoolgirl">女生</router-link>
          </li>
        </ul>
      </nav>
      <!-- 图书分类 -->
      <div class="box">
        <div class="all-title">图书分类</div>
        <bookchoose></bookchoose>
      </div>
      <!-- 热门标签 -->
      <div class="box" style="margin-top: 10px">
        <div class="all-title">
          热门标签
          <div class="vip" @click="changetype">换一换</div>
        </div>
        <div class="box-label">
          <div class="label">
            <ul>
              <router-link
                :to="'/detailPage?id=' + item.novelId"
                tag="li"
                v-for="(item, index) in datacontent"
                :key="index"
              >
                <span>{{ item.typeName }}</span>
              </router-link>
            </ul>
          </div>
        </div>
      </div>
      <!-- 热推分类好书 -->

      <hotbook></hotbook>
      <!-- 页脚搜索框 -->
      <router-link to="/search">
        <div class="m-search">
          <!-- 输入框 -->
          <div class="inp">
            <input type="text" placeholder="书名" />
          </div>
          <!-- 放大镜 -->
          <div class="magnifier"></div>
        </div>
      </router-link>
      <!-- 页脚 -->
      <!-- 页脚 -->
      <footermodule></footermodule>
    </div>
  </div>
</template>

<script>
import footermodule from "../components/FooterModule.vue";
import bookchoose from "../components/BookChoose.vue";
import hotbook from "../components/HotBook.vue";
import { getChangeType } from "../api/changeit.js";
export default {
  data() {
    return {
      datacontent: [], // 用来存放每次点击换一批出来的三个对象
      num2: "", // 用来放三个随机数
      arr: [], // 用来放三个随机数的数组，用来循环
    };
  },
  methods: {
    //   返回上一步
    back() {
      this.$router.go(-1);
    },
    changetype() {
      //每次点击换一批触发这个方法
      this.num2 = "";
      this.arr = [];
      this.datacontent = []; // 每次点击换一批就让之前的数据全清空
      while (this.arr.length < 12) {
        // 用while来判断是否循环三次
        let num = parseInt(Math.random() * 24);
        if (this.arr.indexOf(num) == -1) {
          // 获得不重复的三个数
          this.arr.push(num);
          this.num2 = num;
          this.datacontent.push(this.typename[this.num2]); // 将随机数当作下标来便利data里的内容
        }
      }
    },
  },
  mounted() {
    getChangeType().then((data) => {
      this.typename = data.typelist;
      console.log(this.typename);
      // 页面一加载的时候先出来三个对象的内容
      for (var i = 0; i < this.typename.length; i++) {
        if (i < 12) {
          this.datacontent.push(this.typename[i]);
        }
      }
    });
  },
  components: {
    footermodule,
    bookchoose,
    hotbook,
  },
};
</script>

<style lang="scss" scoped>
@import "../assets/css/three.css";
</style>